<template>
  <transition enter-active-class="slideInUp faster animated" leave-active-class="slideOutDown faster animated">
    <div class="superDanmuModule" v-show="isShowAni">
      <div class="superDanmuBox publicVCenter">
        <img src="@/assets/image/hd2/superDanmuTitle.png" class="titleText" />
        <img src="@/assets/image/hd2/closeIcon.png" class="closeIcon" v-tap="{ methods: handleClose }" />
        <div class="effectPreview publicHvCenter"><img :src="superDanmuPreview" /></div>
        <div class="typeWrap">
          <div
            class="typeItem publicVCenter"
            v-for="item in superDanmuTypeList"
            :key="item.giftId"
            v-tap="{ methods: chooseSuperDanmuType, giftId: item.giftId }"
          >
            <div class="typeBox publicHvCenter" :class="{ active: currentSuperDanmuType === item.giftId }">
              <div class="time">{{ item.time }}秒</div>
              <div class="price publicVCenter">{{ item.price }}<img src="@/assets/image/hd2/diamondIcon.png" /></div>
            </div>
            <div class="desc">{{ item.giftname }}</div>
          </div>
        </div>
        <div class="txtWrap">
          <textarea
            v-model="content"
            :maxlength="canCustomizeInput ? 40 : 0"
            ref="text"
            cols="30"
            rows="10"
            placeholder="霸屏内容(40字以内)"
            v-on:blur="blur"
          ></textarea>
          <div class="ylBtn publicHvCenter" v-tap="{ methods: ganerateRandomWish }">语录</div>
        </div>
        <div class="payWrap publicVCenter">
          <div class="priceWrap publicVCenter">
            剩余喵币:
            <label class="price">{{ money }}</label>
          </div>
          <div class="sendBtn publicHvCenter" v-tap="{ methods: bapinNow }">立即霸屏</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { sendSuperDanmuGift } from '@/api/index/index';
import { sendSuperDanmuGiftMessage } from '@/api/chat/index';
import { QUICKWISH } from '@/assets/constant/index';
import { superDanmuPreview } from '@/assets/constant/effect';
import { timeoutTask, generateRandom } from '../../utils/index';

const quickWishLen = QUICKWISH.length;
const wx = require('weixin-js-sdk');

export default {
  name: 'superDanmuPopup',
  computed: {
    ...mapState({
      superDanmuTypeList: (state) => state.live.superDanmuTypeList,
      currentSuperDanmuType: (state) => state.app.currentSuperDanmuType,
      money: (state) => state.user.money,
      freeSendGift: (state) => state.user.freeSendGift,
      canCustomizeInput: (state) => state.app.canCustomizeInput,
    }),
  },
  watch: {
    canCustomizeInput(value) {
      if (!value) {
        this.content = '';
      }
    },
  },
  created() {},
  mounted() {
    // 执行弹出动画
    this.showAniStart();
  },
  data() {
    return {
      isShowAni: false, // 控制bapin box弹出动画
      content: '',
      superDanmuPreview,
    };
  },
  methods: {
    ...mapMutations({
      setCurrentSuperDanmuType: 'app/setCurrentSuperDanmuType',
      togglePopup: 'app/togglePopup',
      setOrigin: 'app/setOrigin',
      setUserInfo: 'user/setUserInfo',
    }),
    blur() {
      window.scrollTo(0, -document.documentElement.clientHeight);
    },
    showAniStart() {
      this.isShowAni = true;
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    validateSend() {
      let flag = true;
      const choosedSuperDanmuType = this.superDanmuTypeList.find((item) => item.giftId === this.currentSuperDanmuType);
      if (!this.content) {
        flag = false;
        this.$toast.center('请输入霸屏内容!');
      } else if (this.freeSendGift) {
        flag = true;
      } else if (choosedSuperDanmuType.price > this.money) {
        flag = false;
        this.setOrigin('sendSuperDanmu');
        const tmpPrice = (choosedSuperDanmuType.price - this.money).toFixed(2);
        localStorage.setItem(
          'tmpSuperDanmuInfo',
          JSON.stringify({
            superDanmuId: this.currentSuperDanmuType,
            superDanmuWish: this.content,
          }),
        );
        console.log(
          `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=${tmpPrice}&origin=${this.$store.state.app.origin}`,
        );
        wx.miniProgram.navigateTo({
          url: `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=${tmpPrice}&origin=${this.$store.state.app.origin}`,
        });
      }
      return flag;
    },
    bapinNow() {
      if (!this.validateSend()) {
        return;
      }
      if (this.freeSendGift) {
        sendSuperDanmuGiftMessage(this.content)
          .then(() => {
            this.$toast.center('发送成功!');
            this.content = '';
            this.togglePopup();
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        sendSuperDanmuGift(this.content)
          .then((res) => {
            let tmpResult = null;
            if (res.code === '200') {
              // 更新 用户余额
              this.setUserInfo({
                money: res.balance.balance,
              });
              tmpResult = sendSuperDanmuGiftMessage(this.content);
            }
            return tmpResult;
          })
          .then(() => {
            this.$toast.center('发送成功!');
            this.content = '';
            this.togglePopup();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    handleClose() {
      this.hideAniStart();
      timeoutTask(() => {
        this.togglePopup();
      }, 200);
    },
    sendBroadcast(content) {
      sendSuperDanmuGiftMessage(content);
    },
    ganerateRandomWish() {
      this.content = QUICKWISH[generateRandom(0, quickWishLen)];
    },
    chooseSuperDanmuType(d) {
      this.setCurrentSuperDanmuType(d.giftId);
    },
  },
};
</script>
<style lang="less" scoped>
.superDanmuModule {
  position: absolute;
  width: 100%;
  bottom: 0;
  .superDanmuBox {
    width: 750px;
    height: 860px;
    flex-direction: column;
    background: #170d41;
    .titleBox {
      width: 400px;
      height: 72px;
      position: relative;
      color: #fff;
      font-weight: 500;
      // .rectangle {
      //   position: absolute;
      //   background: linear-gradient(272deg, #e100ff 0%, #7f00ff 100%);
      //   transform: skew(-30deg);
      //   width: 100%;
      //   height: 100%;
      //   top: 0;
      //   left: 0;
      // }
      // .sdIcon {
      //   width: 22px;
      //   height: 38px;
      //   margin-right: 12px;
      //   position: relative;
      // }
      .titleText {
        position: relative;
        width: 343px;
        height: 72px;
      }
      .time {
        font-size: 28px;
        position: relative;
      }
      .price {
        width: 102px;
        height: 34px;
        background-image: url(https://static.hudongmiao.com/joymewH5/img/popupArea/priceBox-danmu.png);
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
        right: -40px;
        font-size: 24px;
        color: #8a4e41;
        letter-spacing: 1px;
        .unit {
          width: 28px;
          height: 21px;
          margin-left: 6px;
        }
      }
    }
    .titleText {
      position: relative;
      width: 343px;
      height: 72px;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
    }
    .closeIcon {
      position: absolute;
      width: 48px;
      height: 48px;
      top: 16px;
      right: 16px;
    }
    .effectPreview {
      width: 100%;
      height: 220px;
      background-color: #000;
      margin-top: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .typeWrap {
      display: flex;
      margin-top: 32px;
      justify-content: space-around;
      width: 668px;
      .typeItem {
        width: 168px;
        flex-direction: column;
        margin: 0 5px;
        .typeBox {
          width: 168px;
          height: 80px;
          border-radius: 8px;
          .time {
            font-size: 28px;
            font-weight: 400;
            color: #ffffff;
          }
          .price {
            font-size: 24px;
            font-weight: 400;
            color: #ffffff;
            margin-left: 12px;
          }
          img {
            width: 24px;
            margin-top: 6px;
            margin-left: 3px;
          }
        }
        .desc {
          font-size: 28px;
          font-weight: 400;
          margin-top: 10px;
        }
        &:nth-child(1) {
          .typeBox {
            background: linear-gradient(276deg, #71b3ff 0%, #2c82e4 100%);
            &.active {
              box-shadow: 0px 0px 50px #2c82e4;
            }
          }
          .desc {
            color: #2c82e4;
          }
        }
        &:nth-child(2) {
          .typeBox {
            background: linear-gradient(276deg, #c571ff 0%, #e42cd5 100%);
            &.active {
              box-shadow: 0px 0px 50px #e42cd5;
            }
          }
          .desc {
            color: #e232d9;
          }
        }
        &:nth-child(3) {
          .typeBox {
            background: linear-gradient(276deg, #e49e2c 0%, #ffc27f 100%);
            &.active {
              box-shadow: 0px 0px 50px #ffc27f;
            }
          }
          .desc {
            color: #e59f2f;
          }
        }
      }
    }
    .txtWrap {
      width: 686px;
      height: 116px;
      margin-top: 32px;
      position: relative;
      border: 2px solid;
      border-image: linear-gradient(99deg, #45f6fe 0%, #c026ed 100%) 1 1;
      border-radius: 12px;
      textarea {
        width: 580px;
        height: 116px;
        font-size: 28px;
        padding: 20px 32px;
        color: #fff;
        outline: none;
        border: none;
        box-sizing: border-box;
        background-color: transparent;
        &::placeholder {
          font-size: 28px;
          color: #756ea1;;
        }
      }
      .ylBtn {
        width: 88px;
        height: 48px;
        background: #231f44;
        border-radius: 10px;
        font-size: 28px;
        font-weight: 400;
        color: #c2baf5;
        position: absolute;
        top: 20px;
        right: 32px;
      }
    }
    .payWrap {
      justify-content: space-between;
      padding: 0 34px;
      width: 100%;
      margin-top: 64px;
      .priceWrap {
        color: #c2baf5;
        font-size: 28px;
        .price {
          color: #ff3675;
          font-size: 40px;
          margin-left: 6px;
        }
      }
      .sendBtn {
        width: 252px;
        height: 72px;
        background: linear-gradient(90deg, #6c47ff, #ff68f9 100%);
        border-radius: 12px;
        font-size: 28px;
        color: #fff;
      }
    }
  }
}
</style>
